<template>
	<!-- height: 1341px; -->
	<view :class="show?'isPositionFixed':''">
		<view class="container" style="position: relative;    overflow: hidden;
	padding-bottom: 80rpx;height: 2683rpx;width: 750rpx;margin-top: -79px;
    ">
			<view class="gameMain" style="width: 624.56rpx;height: 687.81rpx;margin-left: 63rpx;">
				<almost-lottery :prizeList="prizes" :duration='3' :prizeIndex="prizeIndex" :actionBg='actionBg'
					:actionSize='150' :ringCount='3' :stroked='true' :lotteryBg='lotteryBg' :lotterySize='558.38'
					@reset-index="prizeIndex = -1" @draw-start="startCallBack" @draw-end="endCallBack"
					@finish="handleDrawFinish" v-if="prizes.length" />
			</view>
			<image class="people" src="../static/doct/people.png" mode=""></image>
			<view class="flex aj-center f-28 c-FEFEFF "
				style="margin-top: 42rpx;position: relative;letter-spacing: 10rpx;">
				<view class="">
					您今天还有
				</view>
				<view class="c-FFDD52">
					{{price.can_num}}
				</view>
				<view class="">
					次抽奖机会
				</view>
			</view>

			<view class="aj-center" style="position: relative;">
				<view class="f-24 c-FFFFFF aj-center" style="width: 636rpx;position: relative;margin-top: 51rpx;
			height: 80rpx;
			background: #84B0FF;
			opacity: 1;
			border-radius: 40rpx;">
					奖品-现金红包奖励充值到您的“余额”了哦~
				</view>
			</view>

			<view class="aj-center" style="margin-top: 44rpx; height: 83rpx;position: relative;">
				<view class="" style="width: 346rpx;height: 83rpx;margin: 0 auto;position: absolute;">
					<image src="../static/doct/shijian.png" mode=""></image>
				</view>
				<view class="f-40 c-FFFFFF f-bold" style="position: absolute;">
					活动时间
				</view>
			</view>

			<view class="" style="width: 696rpx;height: 21rpx;margin: 0 auto;margin-top: -14rpx;">
				<image src="../static/doct/juxingtiao.png" mode=""></image>
			</view>
			<view class="b-1F51A6 f-28 c-FFFFFF  flex-wrap" style="width: 676rpx;height: 211rpx;position: relative;margin: 0 auto;
			 padding-top: 29rpx;padding-left: 45rpx;
			 border-radius: 0rpx 0rpx 16rpx 16rpx;
			 margin-top: 12rpx;">
				<view class="">
					活动开始时间：{{ActivityRule.begin_time}}
				</view>
				<view class="" style=" ">
					活动结束时间：{{ActivityRule.end_time}}
				</view>
			</view>


			<view class="aj-center" style="margin-top: 80rpx; height: 83rpx;position: relative;">
				<view class="" style="width: 346rpx;height: 83rpx;margin: 0 auto;position: absolute;">
					<image src="../static/doct/shijian.png" mode=""></image>
				</view>
				<view class="f-40 c-FFFFFF f-bold" style="position: absolute;">
					活动规则
				</view>
			</view>

			<view class="" style="width: 696rpx;height: 21rpx;margin: 0 auto;margin-top: -14rpx;">
				<image src="../static/doct/juxingtiao.png" mode=""></image>
			</view>
			<view class="b-1F51A6 f-28 c-FFFFFF  flex-wrap" style="width: 676rpx;
		 position: relative;margin: 0 auto;
		 			 padding-top: 29rpx;padding-left: 45rpx;
					 padding-right: 45rpx;
					 border-radius: 0rpx 0rpx 16rpx 16rpx;
		 			 margin-top: 12rpx;">
				<view class="" style="margin-bottom: 24rpx;">
					<rich-text :nodes="ActivityRule.desc"></rich-text>
				</view>

			</view>
			<u-mask class='FloatMask' :show="show">
				<view class="">
					<view
						style="position: absolute; top: 46%; left: 50%; width: 435rpx;height: 625rpx;transform: translate(-50%,-50%);">
						<view v-if='price.type==0' class="" style=" width: 435rpx;height: 508rpx;">
							<image src="../static/doct/hongbao.png"></image>
							<view class="f-32 c-D43D2B"
								style="position: absolute; width: 435rpx;   top: 24%;  text-align: center; ">
								恭喜获得
							</view>
							<view class="c-D43D2B f-72"
								style="position: absolute; width: 435rpx;   top: 30%;     text-align: center; ">
								<span v-if='price.type==0'>¥{{price.money}}</span>
								<span v-else>{{price.name}}</span>
							</view>
							<view class="aj-center f-32 c-FFFFFF bor-r36" style="position: absolute; width: 300rpx;
								height: 72rpx;   top: 55%;
								left: 14%;
								  background: linear-gradient(360deg, #FFA727 0%, #FFD356 100%);
								  box-shadow: 0px 4px 8px rgba(135, 83, 4, 0.2);
								  text-align: center; " @click="LingquMoney">
								立即领取
							</view>

							<view class="f-24 c-FFD153"
								style="position: absolute; width: 435rpx;   top: 72%;  text-align: center; ">
								所获金额可在账户余额中查看
							</view>
						</view>
						<view v-if='price.type==1' class="" style=" width: 435rpx;height: 508rpx;">
							<image src="../static/doct/hongbao.png"></image>
							<view class="RealGoods">
								<image :src="price.goods.image" mode=""></image>
								<view class="">
									<view class="">
										{{price.name}}
									</view>
									<!-- <view class="f-28 c-EE1B1B mt-12" style="text-decoration:line-through">
										￥{{price.goods.sku_price[0].price}}
									</view> -->
								</view>

							</view>


							<view style="margin-bottom: 10rpx;
								font-size: 24rpx;
								display: flex;
								justify-content: center;
								position: absolute;
								width: 100%;
								bottom: 150rpx;" class="just-between c-FFFFFF fw-400 fs-32">
								<!-- 	<view @click="show=false" class="bor-r10 c-11 aj-center" style="margin-right: 40rpx; width: 140rpx; height: 60rpx; background: #FFFFFF;">
									暂不领取
								</view>
								<view @click="addCart()" class="bor-r10 aj-center" style="width: 140rpx; height: 60rpx; background: #F6A345;">
									加入购物车
								</view> -->
								奖品正在购物车等你哦
							</view>
						</view>
						<view class="" style="position: relative;" v-if='price.type==2'>
							<image class="Manghe" src="../static/doct/manghe.png" mode=""></image>
							<image @click="openManghe" class="Hezi" src="../static/doct/hezi.png" mode=""></image>
							<view v-if="GoodsShow" class="mangheGoods">
								<view class="goodsInfo">
									<view class="b-1F51A6 mr-14" style="width: 110rpx;height: 100rpx;opacity:1;">
										<image :src="price.goods.image" mode=""></image>
									</view>
									<view class="">
										<view class="c-11 f-26 fw-400">
											{{price.name}}
										</view>
										<!-- <view class="f-28 c-EE1B1B mt-12" style="text-decoration:line-through">
											￥{{price.goods.sku_price[0].price}}
										</view> -->
									</view>
								</view>

								<!-- <view  style="text-align: center;"  class=" c-FFFFFF fw-400 f-28" >
									剩余领取时间 <uni-countdown color='#ffffff' style='display: inline-block;' :show-day="false"  :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
								</view> -->
								<view
									style=" margin-bottom: 10rpx;   font-size: 24rpx;display: flex;justify-content: space-around;"
									class="just-between c-FFFFFF fw-400 fs-32">
									<!-- <view @click="show=false" class="bor-r10 c-11 aj-center" style="width: 140rpx; height: 60rpx; background: #FFFFFF;">
										暂不领取
									</view>
									<view @click="addCart()" class="bor-r10 aj-center" style="width: 140rpx; height: 60rpx; background: #F6A345;">
										加入购物车
									</view> -->
									奖品正在购物车等你哦
								</view>
							</view>
						</view>
						<view class="" style=" width: 435rpx;height: 508rpx;" v-if='price.type==3'>
							<image src="../static/doct/hongbao.png"></image>
							<view style="position: absolute;
											top: 150rpx;
											left: 0;
											margin: auto;
											right: 0;
											text-align: center;
											color: #D43D2B;">
								<view class="">
									谢谢惠顾
								</view>
								<image style="width: 80rpx; height: 80rpx; transform: rotate(-90deg);"
									src="../static/doct/xiexie.png" mode=""></image>
							</view>
							<view class="aj-center f-32 c-FFFFFF bor-r36" style="position: absolute; width: 300rpx;
									height: 72rpx;   top: 55%;
									left: 14%;
									  background: linear-gradient(360deg, #FFA727 0%, #FFD356 100%);
									  box-shadow: 0px 4px 8px rgba(135, 83, 4, 0.2);
									  text-align: center; " @click="TryAgain">
								再试一次
							</view>
						</view>
						<view class="" style="width: 63rpx;height: 63rpx;margin: auto; margin-top: 54rpx"
							@click="show=false">
							<image src="../static/doct/close.png" mode=""></image>
						</view>
					</view>
				</view>
			</u-mask>

		</view>
	</view>
</template>

<script>
	// import LuckyWheel from '../../components/@lucky-canvas/uni/lucky-wheel.vue'
	import {
		BASE_URL,
		API_URL
	} from '@/env.js'
	import http from '@/shopro/request/index'
	import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
	import HongBao from '../static/doct/hbao.png'
	import Empty from '../static/doct/xiexie.png'
	import manghe from '../static/doct/lieu.png'
	export default {
		components: {
			AlmostLottery
		},
		data() {
			return {
				originbool: false,
				show: false,
				GoodsShow: false,
				BASE_URL: BASE_URL,
				list: [],
				openhezibool: false,
				price: {
					type: '3',
					name: '',
					money: '',
					goods: {},
					can_num: 0
				},
				lotteryBg: '',
				actionBg: require("../static/doct/origin.png"),
				prizeList: [],
				// 中奖下标
				prizeIndex: -1,
				blocks: [{
					padding: '13px',
					background: '#FF922A'
				}],
				prizes: [],
				play: false,
				index: 0,
				ActivityRule: {},
				buttons: [{
					radius: "35px",
					imgs: [{
						src: require('../static/doct/origin.png'),
						width: "82px",
						height: "82px",
						top: "-49px",
					}, ],
				}, ],
				baseUrl: this.$baseUrl, //后台域名地址
			}
		},
		onShow() {

			if (!uni.getStorageSync("isLogin")) {
				this.$u.toast('请先进行登录，再来抽奖');

				setTimeout(() => {
					uni.navigateBack(1)
				}, 1000)


			}
			let vm = this
			vm.loadRule()
			vm.$https('lottery.lists').then(res => {
				console.log(res, 'resList')
				this.price.can_num = res.can_num
				if (res.data.length) {
					var arr = []
					for (var i = 0; i < res.data.length; i++) {
						let image =
							res.data[i].type == 0 ? require('../static/doct/hbao.png') :
							res.data[i].type == 1 ? this.BASE_URL + res.data[i].goods.image :
							res.data[i].type == 2 ? require('../static/doct/lieu.png') : require(
								'../static/doct/xiexie.png')
						arr[i] = {
							prizeName: res.data[i].gifts_name,
							top: '10%',
							// fontSize: "14px",
							// fontColor: '#FF7B58',
							prizeImage: image,
							prizeId: res.data[i].id

							// let image = res.data[i].type==0? require(''../static/doct/hbao.png'):""
							// fonts: [{
							// 	text: res.data[i].gifts_name,
							// 	top: '10%',
							// 	fontSize: "14px",
							// 	fontColor: '#FF7B58',
							// 	img: image,
							// 	id: res.data[i].id
							// }, ],
							// background: i % 2 == 0 ? '#FFE358' : '#FEFAEA '
						}

					}
				}
				vm.prizes = arr
				console.log(vm.prizes)
			}).catch(e => {
				// reject(e)
			});
		},

		methods: {

			openhezi() {},
			loadRule() {

				this.$https('lottery.get_other').then(res => {
					console.log(res)
					this.ActivityRule = res.data
				})
			},
			TryAgain() {
				this.show = false
				this.startCallBack()
			},
			LingquMoney() {
				this.$u.toast('领取成功');
				this.show = false
			},
			startCallBack() {
				// 先开始旋转
				// this.$refs.myLucky.play()
				if (this.play) {
					return
				}
				this.play = true
				this.GoodsShow = false
				this.$https('lottery.luckw').then(res => {
					if (res.code === 1) {
						console.log('抽中222222', res)
						this.price = res.data;
						this.prizes.forEach((item, n) => {
							if (item.prizeId == res.data.gifts_id) {
								console.log(n)
								this.prizeIndex = n
							}
						})


					} else {
						this.$u.toast(res.msg);
					}
					this.play = false
				}).catch(e => {
					reject(e)
					// this.$u.toast('请先进行登录，再来抽奖');
					// this.$refs.myLucky.stop(this.index)
				});

			},

			// 抽奖结束触发回调
			endCallBack(prize) {
				// 奖品详情

				// 	this.originbool = true;
				// 	setTimeout(() => {

				// 	}, 1000)
				console.log(prize)

				if (this.price.type == 1) {
					this.addCart()
				}
				// this.originbool = false;
				this.show = true

			},
			handleDrawFinish(res) {
				console.log('结果', res)
			},

			openManghe() {
				this.GoodsShow = true
				setTimeout(() => {
					this.addCart()
				}, 1000)
			},
			addCart() {
				let obj = {
					goods_id: this.price.goods.sku_price[0].goods_id,
					goods_num: 1,
					sku_price_id: this.price.goods.sku_price[0].id,
					goods_price: this.price.goods.sku_price[0].price,
					good_type: 'choujiang'

				};

				http('cart.add', {
					goods_list: [obj],
					from: 'goods'
				}).then(res => {
					if (res.code === 1) {
						// this.$u.toast(res.msg);

					}
				});
			},
		}
	}
</script>

<style>
	.turn_ul {
		text-align: center;
		position: relative;
		width: 128rpx;
		height: 100rpx;
	}

	.turn_ul:nth-child(2) {
		left: 50%;
		margin-left: -62rpx;
		margin-top: 62rpx;
	}

	.turn_ul:nth-child(3) {
		left: 76%;
		margin-left: -94rpx;
		margin-top: -48rpx;
		transform: rotate(45deg);
	}

	.turn_ul:nth-child(4) {
		left: 76%;
		margin-left: -38rpx;
		margin-top: 18rpx;
		transform: rotate(90deg);
	}

	.turn_ul:nth-child(5) {
		left: 79%;
		margin-left: -106rpx;
		margin-top: 20rpx;
		transform: rotate(136deg);
	}

	.turn_ul:nth-child(6) {
		left: 76%;
		margin-left: -208rpx;
		margin-top: -54rpx;
		transform: rotate(180deg);
	}

	.turn_ul:nth-child(7) {
		left: 76%;
		margin-left: -328rpx;
		margin-top: -142rpx;
		transform: rotate(211deg);
	}

	.turn_ul:nth-child(8) {
		left: 76%;
		height: 50px;
		margin-left: -374rpx;
		margin-top: -228rpx;
		transform: rotate(267deg);
	}

	.turn_ul:nth-child(9) {
		left: 90%;
		width: 140rpx;
		height: 110rpx;
		margin-left: -416rpx;
		margin-top: -222rpx;
		transform: rotate(314deg);
	}

	@keyframes move {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(360deg);
		}

		75% {
			transform: rotate(600deg);
		}

		100% {
			transform: rotate(720deg);
		}

	}

	/* .boxorigin {
		transition: all 2s;
	}
 */
	.boxtrans {
		animation: move 0.5s ease-in-out;
	}

	.FloatMask .u-mask {
		top: 0 !important;
	}

	.isPositionFixed {
		/* position: fixed;
		    top: 0;
		    left: 0;
		    width: 100%; */

	}

	.container {
		background: url('https://hospital.bigchun.com/uploads/20220216/762f384ecf3d92d0b18f6cdc6c78cd80.png') no-repeat;
		background-size: 100% 100%;
	}

	.gameMain {
		background-image: url('https://hospital.bigchun.com/uploads/20220217/fa077563d7c3703b8f5565d02ee04057.png');
		background-size: 100% 100%;
		padding-top: 36rpx;
		position: relative;
		margin-top: 600rpx;
	}



	.luckyWheel {
		width: 558.38rpx;
		height: 561rpx;
		position: absolute;
	}

	.Manghe {
		width: 520rpx;
		height: 600rpx;
	}

	.Hezi {
		position: absolute;
		left: 0;
		width: 160rpx;
		height: 160rpx;
		bottom: 60rpx;
		right: 0;
		margin: auto;
	}

	.people {
		width: 673rpx;
		height: 334rpx;
		margin-top: -266rpx;
	}

	.mangheGoods {
		position: absolute;
		bottom: 30rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.goodsInfo {
		padding-top: 32rpx;
		padding-left: 22rpx;
		padding-bottom: 32rpx;
		background: #FFFFFF;
		border: 2rpx solid #707070;
		opacity: 0.82;
		border-radius: 20rpx;
		display: flex;
		margin: 20px;
		margin-bottom: 10px;
	}

	.RealGoods {
		position: absolute;
		left: 0;
		right: 0;
		top: 176rpx;
		/* bottom: 0; */
		margin: auto;
		text-align: center;
		width: 290rpx;
		height: 100rpx;
		font-size: 26rpx;
		text-align: left;
		display: flex;
	}

	.RealGoods>image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 12rpx;
		margin-right: 10rpx;
	}
</style>
